<template>
	<view class="box-comment-fixed">
		<view class="_placeholder"></view>
		<view class="box-comment-fixed-box">
			<!-- #ifndef H5 -->
			<view
				@click="audioBox = !audioBox"
				class="box-comment-fixed-box-audio-button"
				v-if="editorConfig.files.audio.status">
				<text :class="audioBox?'iconfont icon-text':'iconfont icon-yuyin'"></text>
			</view>
			<!-- #endif -->
			<template v-if="audioBox">
				<!-- #ifndef H5 -->
				<view class="box-comment-fixed-box-textarea">
					<view
						@click="clickSoundRecordingButton"
						class="box-comment-fixed-box-textarea-audio-button">
						{{soundRecordingText}}
					</view>
				</view>
				<!-- #endif -->
				<!-- 发送按钮 -->
				<view class="box-comment-fixed-box-publish-button" v-if="content">{{$t('send')}}</view>
			</template>
			<template v-else>
				<view
					class="box-comment-fixed-box-textarea"
					:style="editorConfig.files.audio.status?'':'margin-left: 10rpx;'">
					<textarea
						placeholder="说点什么吧..."
						placeholder-style="font-size: 28rpx;color:#C0C4CC;"
						v-model="content"
						cursor-spacing="300"
						maxlength="-1"
						:show-confirm-bar="false"></textarea>
				</view>
				<!-- 表情按钮 -->
				<view
					class="box-comment-fixed-box-emoji"
					@click="emojiStatus = !emojiStatus">
					<text class="iconfont icon-smile"></text>
				</view>
				<!-- 更多按钮 -->
				<template v-if="editorConfig.files.image.status || editorConfig.files.video.status">
					<view
						class="box-comment-fixed-box-more"
						v-if="!content"
						@click="clickMoreButton">
						<text class="iconfont icon-add-bold"></text>
					</view>
				</template>
				<!-- 发送按钮 -->
				<view
					class="box-comment-fixed-box-publish-button"
					v-if="content"
					@click="clickPublishButton">{{$t('send')}}</view>
			</template>
		</view>
		<!-- 选择表情 -->
		<view v-if="emojiStatus" class="global-bottom-to-top-pop-up">
			<view class="_top" @click="emojiStatus = false"></view>
			<view class="_bottom">
				<view class="_title">
					<text class="_title-text">{{$t('editorStickers')}}</text>
					<view @click="emojiStatus = false"><text class="iconfont icon-close-bold"></text></view>
				</view>
				<view class="select-emoji-box">
					<view class="_box-left">
						<scroll-view scroll-y>
							<view :class="emojiHover == 'emoji'?'_hover':''">
								Emoji
							</view>
						</scroll-view>
					</view>
					<view class="_box-right">
						<scroll-view scroll-y>
							<view class="_emoji">
								<view
									@click="clickEmojiButton(item)"
									v-for="item in editorConfigJSON.emoji"
									class="_emoji-for">
									<text>{{item}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-comment-fixed",
		props:{
			editorConfig:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				content:"",
				audioBox:false,
				
				emojiStatus: false, //--------表情弹窗
				emojiHover: "emoji", //-------当前表情分类
				emojiCategories: [], //-------原生表情分类
				emojiNativeList: [], //-------原生表情列表
				
				editorConfigJSON:null,//编辑器配置，获取表情
				
				
				soundRecordingText:this.$t('clickStart'),//点击录音开始按钮
				soundRecordingBox:false,//录音框子
				soundRecordingStatus:false,//录音状态
			};
		},
		created() {
			clearInterval(this.timer)
		},
		mounted(){
			uni.request({
				url: this.$_configFile() + "editor.json",
				success: (res) => {
					this.editorConfigJSON = res.data;
				}
			})
		},
		methods:{
			clickSoundRecordingButton(){
				this.soundRecordingStatus = !this.soundRecordingStatus;
				if(this.soundRecordingStatus){
					uni.getRecorderManager().start();
					this.soundRecordingText = 1;
					this.timer = setInterval(() => {
						this.soundRecordingText += 1;
						if(this.soundRecordingText == 59){
							this.soundRecordingText = this.$t('clickStart');
							this.soundRecordingStatus = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								uni.$emit('boxCommentFixedContentFile',{msg:res.tempFilePath,type:'audio'});
							});
						}
					}, 1000);
				}else{
					this.soundRecordingText = this.$t('clickStart');
					this.soundRecordingStatus = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						uni.$emit('boxCommentFixedContentFile',{msg:res.tempFilePath,type:'audio'});
					});
				}
			},
			clickPublishButton(){
				uni.$emit('boxCommentFixedContent',{msg:this.content});
				this.content = "";
			},
			clickEmojiButton(e){
				this.content += e;
				this.emojiStatus = false;
			},
			clickMoreButton(){
				uni.showActionSheet({
					itemList: [
						this.$t('image'),this.$t('video')
					],
					success: (res) => {
						if(res.tapIndex === 0){
							if(this.editorConfig.files.image.status){
								uni.chooseImage({
									count:1,
									success: (res) => {
										uni.$emit('boxCommentFixedContentFile',{msg:res.tempFiles[0].path,type:'image'});
									}
								})
							}else{
								uni.showToast({
									title: this.$t('notAllow'),
									icon: 'none',
									duration: 1500
								});
							}
						}
						if(res.tapIndex === 1){
							if(this.editorConfig.files.video.status){
								uni.chooseVideo({
									maxDuration:60,
									success: (res) => {
										uni.$emit('boxCommentFixedContentFile',{msg:res.tempFilePath,type:'video'});
									}
								})
							}else{
								uni.showToast({
									title: this.$t('notAllow'),
									icon: 'none',
									duration: 1500
								});
							}
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.box-comment-fixed{
	._placeholder{
		width: 100%;
		height: 126rpx;
	}
	.box-comment-fixed-box{
		width:calc(100% - 25rpx);
		height: 100rpx;
		border-top: 1rpx solid #cfcfcf;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #f7f7f7;
		z-index: 800;
		display: flex;
		align-items: center;
		overflow: hidden;
		padding-right: 25rpx;
		.box-comment-fixed-box-audio-button{
			width: 43rpx;
			height: 43rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid $primary;
			line-height: 30rpx;
			border-radius: 100rpx;
			margin-left: 25rpx;
			flex-shrink: 0;
			text{
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.box-comment-fixed-box-textarea{
			flex: 1;
			margin-left: 25rpx;
			textarea{
				background: #FFF;
				height: 60rpx;
				width:calc(100% - 20rpx);
				padding: 10rpx;
				font-size: 28rpx;
				
			}
			.box-comment-fixed-box-textarea-audio-button{
				background: #FFF;
				height: 80rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
		.box-comment-fixed-box-emoji{
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 60rpx;
			margin-left: 25rpx;
			flex-shrink: 0;
			text{
				font-size: 60rpx;
			}
		}
		.box-comment-fixed-box-more{
			width: 43rpx;
			height: 43rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid $primary;
			line-height: 30rpx;
			border-radius: 100rpx;
			margin-left: 25rpx;
			flex-shrink: 0;
			text{
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.box-comment-fixed-box-publish-button{
			background: $green;
			color: #FFF;
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 12rpx 15rpx;
			border-radius: 5rpx;
			margin-left: 20rpx;
		}
	}
	// 弹窗 表情
	.select-emoji-box {
		display: flex;
	
		._box-left {
			width: 150rpx;
			max-height: 800rpx;
			background: $border;
			flex-shrink: 0;
	
			scroll-view {
				width: 150rpx;
				max-height: 800rpx;
				white-space: nowrap;
	
				view {
					font-size: 28rpx;
					line-height: 28rpx;
					padding: 25rpx;
				}
	
				._hover {
					background: #FFF;
					color: $theme;
				}
			}
		}
	
		._box-right {
			flex: 1;
			max-height: 800rpx;
	
			scroll-view {
				width: 100%;
				max-height: 800rpx;
				white-space: nowrap;
				display: flex;
	
				._emoji {
					display: flex;
					flex-wrap: wrap;
					padding: 25rpx;
	
					._emoji-for {
						padding: 12.5rpx;
	
						text {
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 50rpx;
							line-height: 50rpx;
						}
	
						view {
							width: 65rpx;
							height: 65rpx;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
}
</style>